import React from 'react';

import { PlayInfo } from '../../hooks/useAudio';

interface AudioFileListProps {
	fileList: File[];
	recordFile: File | null;
	playInfo: PlayInfo;
	onPlayUploadRecord: (file: File) => void;
	onPlayRecord: () => void;
	onRemoveFile: (file: File) => void;
	onRemoveRecord: () => void;
	onPauseVoice: () => void;
}

const AudioFileList: React.FC<AudioFileListProps> = ({
	fileList,
	recordFile,
	playInfo,
	onPlayUploadRecord,
	onPlayRecord,
	onRemoveFile,
	onRemoveRecord,
	onPauseVoice
}) => {
	return (
		<div className="w-full pt-2 text-4.5 text-[#3A79F9]">
			{fileList.map(v => (
				<div key={v.lastModified} className="flex items-center cursor-pointer">
					<SvgIcon localIcon="icon-music" className="mr-1" />
					<span>{v.name}</span>
					<AButton
						size="small"
						type="primary"
						onClick={() => onPlayUploadRecord(v)}
						className="my-2 ml-2"
					>
						{!playInfo.localPlay ? '播放' : '暂停'}
					</AButton>
					<AButton
						size="small"
						danger
						onClick={() => {
							onRemoveFile(v);
							if (playInfo.localPlay) {
								onPauseVoice();
							}
						}}
						className="ml-2"
					>
						删除
					</AButton>
				</div>
			))}

			{recordFile && (
				<div className="flex items-center mt-2">
					<SvgIcon localIcon="icon-music" className="mr-1" />
					<span>{recordFile.name}</span>
					<AButton size="small" type="primary" onClick={onPlayRecord} className="my-2 ml-2">
						{!playInfo.recordPlay ? '播放' : '暂停'}
					</AButton>
					<AButton size="small" danger onClick={onRemoveRecord} className="ml-2">
						删除
					</AButton>
				</div>
			)}
		</div>
	);
};

export default AudioFileList;
